import React from 'react';
import './index.scss'
import { useState, useEffect } from 'react';
import MyTable from '../../../../components/MyTable';
import { AppstoreOutlined, PlusOutlined, ExportOutlined, ClearOutlined, SyncOutlined, ExpandAltOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons';
import locale from 'antd/es/locale/zh_CN';
import { useNavigate } from 'react-router-dom';
import { Space, ConfigProvider, DatePicker, Input, notification } from 'antd';
import * as XLSX from 'xlsx'
import fs from 'file-saver'
import service from '../../../../api'

const Need = () => {

    const [data, setData] = useState([])
    const [searchValue, setValue] = useState('')
    const { RangePicker } = DatePicker;
    const { Search } = Input;
    var history = useNavigate()
    const columns = [
        {
            title: "序号",
            key: "id",
            dataIndex: "id",
        },
        {
            title: "单号",
            dataIndex: "productId",
            key: 'productId'
        },
        {
            title: "产品线",
            dataIndex: "productLine",
            key: "productLine",
        },
        {
            title: "部门",
            key: "dept",
            dataIndex: "dept",
        },
        {
            title: "重量",
            dataIndex: "cargoWeight",
            key: 'cargoWeight'
        },
        {
            title: "数量",
            key: "cargoNumber",
            dataIndex: "cargoNumber",
        },
        {
            title: "来货重量",
            dataIndex: "purchaseWeight",
            key: 'tabPerson'
        },
        {
            title: "来货数量",
            dataIndex: "purchaseNumber",
            key: 'tabPerson'
        },
        {
            title: "制单人",
            dataIndex: "tabPerson",
            key: 'tabPerson'
        },
        {
            title: "仓库",
            dataIndex: "warehouse",
            key: 'warehouse'
        },
        {
            title: "创建时间",
            dataIndex: "createTime",
            key: 'createTime'
        },
        {
            title: '操作',
            key: 'set',
            render: (_: any, record: any, index: any) => {
                return (
                    <>
                        <DeleteOutlined className='delete' onClick={() => { handleDelete(record.id, index) }} />
                       
                    </>

                )
            }
        },


    ];
    const [dataList, setdataList] = useState([]);
    var excelExport = (table: any, filename: any) => {

        // 解析dom元素
        const wb = XLSX.utils.table_to_book(table)

        /* Export to file (start a download) */
        const defaultCellStyle = {
            font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
            fill: { fgColor: { rgb: 'FFFFAA00' } },
        }

        const wopts: any = {
            bookType: 'xlsx',
            bookSST: false,
            type: 'binary',
            cellStyle: true,
            defaultCellStyle: defaultCellStyle,
            showGridLines: false,
        }

        //生成xlsx格式的数据
        const wbout = XLSX.write(wb, wopts)

        var data: any = [s2ab(wbout)];

        //转换成二进制Blob类型的数据
        const blob = new Blob(data, { type: 'application/octet-stream' })

        //文件另存为
        fs.saveAs(blob, filename + '.xlsx')
    }
    var s2ab = (s: any) => {
        if (typeof ArrayBuffer !== 'undefined') {
            const buf = new ArrayBuffer(s.length);
            const view = new Uint8Array(buf);
            for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
            return buf;
        } else {
            const buf = new Array(s.length);
            for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
            return buf;
        }
    }
    var handleExcelExport = () => {
        var table = document.querySelector('table');
        excelExport(table, 'download.xlsx');
    }
    useEffect(() => {
        requestList()
    }, [])
    var handleAdd = () => {
        history('/index/procure/addneed')
    }
    var requestList = async () => {
        var res = await service.cxl.requireList()
        res.data.data.forEach((item: any, index: any) => {
            item.key = index
        })
        setdataList(res.data.data)

    }
    var handleDelete = async (id: any, i: any) => {
        var res = await service.cxl.Deleterequire(id)

        if (res.data.code == 200) {
            notification.success({ message: '删除成功!' });
            var newList = JSON.parse(JSON.stringify(dataList))
            newList.splice(i, 1)
            setdataList(newList)
        }


    }
    var changeValue = (e: any) => {
        setValue(e.target.value)
    }
    var handleSearch = async () => {
        if (searchValue != '') {
            var res = await service.cxl.requireList({ productId: searchValue, begin: data[0], end: data[1] })
            res.data.data.forEach((item: any, index: any) => {
                item.key = index
            })
            setdataList(res.data.data)
        } else {
            var res = await service.cxl.requireList({ begin: data[0], end: data[1] })
            res.data.data.forEach((item: any, index: any) => {
                item.key = index
            })
            setdataList(res.data.data)
        }

    }
    var saveDate = (value: any, mode: any) => {

        setData(mode)

    }
    return (
        <div className='need'>
            <div className='title'>
                <div className='left'>
                    <span><AppstoreOutlined />黄金分类</span>
                    <span className='click' onClick={handleAdd}><PlusOutlined />新增需求单</span>
                    <span className='click' onClick={handleExcelExport}><ExportOutlined />导出</span>
                </div>
                <div className='right'>
                    <div className="time">
                        <Space direction="vertical" size={12}>
                            <ConfigProvider locale={locale}>
                                <RangePicker
                                    onChange={saveDate}
                                    format="YYYY-MM-DD"

                                />
                            </ConfigProvider>
                        </Space>
                    </div>
                    <div className="search">
                        <Search
                            onSearch={handleSearch}
                            value={searchValue}
                            onChange={changeValue}
                            placeholder="请输入选货单号"
                            allowClear
                            enterButton="搜索"

                        />
                    </div>
                    <div className="operation">
                        <ClearOutlined />
                        <SyncOutlined />
                        <ExpandAltOutlined />
                    </div>
                </div>
            </div>
            <MyTable data={dataList} columns={columns} />
        </div>
    );
};

export default Need;